<!-- home -->
<template>
  <div class="index-container">
    <div style="overflow: hidden">
    <img src="../../../static/logo.png" class="logo" alt="">
    </div>
    <div class="input-body">
      <img src="../../../static/login.png" class="wz" alt="">
      <div style="height: 19px"></div>
      <div class="input-item">
        <div class="input-name">
          + 86
        </div>
        <van-field class="input-value" v-model="mobile"  placeholder="请输入手机号" />
      </div>
      <div class="input-item">
        <van-field class="input-value code-value"  v-model="code"  placeholder="请输入验证码" />
        <div class="codeBtn" @click="getMyCode()" :disabled="disabled">
          {{codeMsg}}
        </div>
      </div>
      <div class="con-system">

          <img src="../../../static/wh.png" class="whimg" alt="">
        <a :href="'tel:' + system" rel="external nofollow" style="color: #101010">
          联系管理员
        </a>
      </div>
      <div class="login-btn" @click="getlogin()">
        登 录
      </div>
    </div>

  </div>
</template>

<script>
import { getCode, getSystem, login } from '@/api/user.js'
export default {
  data() {
    return {
      mobile: '',
      code: '',
      codeMsg: '获取验证码',
      disabled: false,
      system: '',
      openid:''
    }
  },

  computed: {},

  mounted() {
    var url = window.location.href ;              //获取当前url
    var dz_url = url.split('#')[0];                //获取#/之前的字符串
    console.log(dz_url)
    var cs = dz_url.split('?')[1];                //获取?之后的参数字符串
    if (cs) {
      var cs_arr = cs.split('&');                    //参数字符串分割为数组
      var cs={};
      for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
        cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
      }
    } else {
      cs = {}
    }
    console.log(cs)
    // if (!cs.openid && !localStorage.token) {
    //   window.location.href='http://ad-kzgj-tool.mzdxj.cn/api/wechat/auth?callback_url=http://ad-kzgj-tool.mzdxj.cn/worker/#/login'
    //   return
    // }
    // this.openid = cs.openid
    this.getPhone()
  },

  methods: {
    getlogin() {
      var patt = /^[1][0-9][\d]{9}/
      if (this.mobile === '' || !patt.test(this.mobile)) {
        this.$notify({ type: 'danger', message: '请输入正确手机号' })
        return
      }
      if (this.code === '' || this.code.length!=6) {
        this.$notify({ type: 'danger', message: '请输入正确验证码' })
        return
      }
      let params = {
        mobile: this.mobile,
        c_port: 3,
        code: this.code,
        openid: this.openid
      }
      login(params).then((res) => {
        this.$notify({ type:'success', message: '登录成功' })
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data.user));
        setTimeout(()=>{
          this.$router.replace({name: "Home"})
        },1000)
      }).catch(() => { })
    },
    getMyCode() {
      if (this.disabled) {
        return
      }
      var patt = /^[1][0-9][\d]{9}/
      if (this.mobile === '' || !patt.test(this.mobile)) {
        this.$notify({ type: 'danger', message: '请输入正确手机号' })
      } else {
        let maxNum = 60;
        let oldCodeText = this.codeMsg;
        this.codeMsg = `${maxNum}s重新发送`; //初始显示倒计时
        this.getPhoneCode()
        let codeCountDown = setInterval(() => {
          this.disabled = true;
          let countDownNum = maxNum--;
          this.codeMsg = `${countDownNum}s重新发送`;
          if (countDownNum == 0) {
            //倒计时结束
            this.codeMsg = oldCodeText;
            clearInterval(codeCountDown);
            this.disabled = false;
          }
        }, 1000);
      }
    },
    getPhone() {
      getSystem()
        .then((res) => {
          console.log(res)
          this.system = res.data.mobile
        })
        .catch(() => { })
    },
    getPhoneCode() {
      const params = {
        mobile: this.mobile,
        c_port: 3
      }
      getCode(params)
        .then((res) => {
          this.$notify({ type:'success', message: '发送成功' })
          console.log(res)
        })
        .catch(() => { })
    }
  }
}
</script>
<style lang="scss" scoped>
.index-container{
  overflow: hidden;
}
.logo{
  width: 165px;
  height: 35px;
  float: right;
  margin-right: 35px;
  margin-top: 70px;
}
.input-body{
  margin-top: 50px;
  width: 355px;
  height: 365px;
  background: url("../../../static/loginBack.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wz{
  width: 94px;
  height: 19px;
  margin-top: 98px;
  margin-left: 45px;
}
.input-item{
  width: 230px;
  height: 44px;
  background: #FFFFFF;
  box-shadow: 0px 0px 8px 0px rgba(168, 32, 37, 0.16);
  border-radius: 10px;
  margin-left: 45px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.input-name{
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000000;
  //line-height: 134px;
  width: 65px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  border-right: 1px solid #eee;
}
.input-value{
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333;
  margin-left: 10px;
  width: 135px;
  padding: 0;
}
.codeBtn{
  width: 100px;
  height: 35px;
  background: #FFFFFF;
  box-shadow: 0px 0px 4px 0px rgba(168, 32, 37, 0.35);
  border-radius: 8px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #A82025;
  line-height: 35px;
  text-align: center;
  margin-left: auto;
  margin-right: 6px;
}
.code-value{
  width: 105px;
  position: relative;
  z-index: 100;
  margin-left: 16px;
}
.con-system{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 45px;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #101010;
  margin-top: 12px;
  img{
    width: 13px;
    height: 13px;
    margin-right: 6px;
  }
}
.login-btn{
  width: 93px;
  height: 40px;
  background: linear-gradient(135deg, #FF3737, #A82025);
  border-radius: 20px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FEFEFE;
  text-align: center;
  line-height: 40px;
  margin-top: 17px;
  float: right;
  margin-right: 63px;
}
</style>
